import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";
import "./style.css";
class Boss extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: true,
      count: 0
    };
    this.toToggole = this.toToggole.bind(this);
  }
  componentDidMount(){
    /* this.setState({
      count: this.state.count+1
    })
    this.setState({
      count: this.state.count+1
    })
    this.setState({
      count: this.state.count+1
    }) */
    /* this.setState((state)=>{
      return {count: state.count+1}
    })
    this.setState((state)=>{
      return {count: state.count+1}
    })
    this.setState((state)=>{
      return {count: state.count+1}
    }) */
  }
  render() {
    return (
      <div>
        <CSSTransition
          in={this.state.isShow}
          timeout={2000}
          classNames="boss-text"
          unmountOnExit
        >
          <p>BOSS来了</p>
        </CSSTransition>
        <p>{this.state.count}</p>
        {/* <p className={this.state.isShow?'show':'hide'}>BOSS来了</p> */}
        <button onClick={this.toToggole}>召唤BOSS</button>
      </div>
    );
  }
  toToggole() {
    this.setState({
      isShow: !this.state.isShow
    });
  }
}

export default Boss;
